HTML <link> Element

The <link> tag in HTML is used to define a link between a document and an external resource. The link tag is mainly used to link to external style sheets making an organised structure of CSS files.

Example: Implementation of link element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Link element</title>
    <link rel="stylesheet" type="text/css"
          href="style.css">
</head>
 
<body>
    <h1>w3wiki</h1>
    <h3>HTML Link Element</h3>
    <p>
        A Computer Science portal for geeks.
        It contains well written, well thought <br>
        and well explained computer science and
        programming articles.
    </p>
</body>
 
</html>


CSS




h1 {
    color: green;
}


Output:

HTML Head Element

The HTML <head> element acts as a container for crucial metadata that defines the document’s essential attributes. Positioned between the <html> and <body> tags, elements such as <title>, <style>, <meta>, <link>, <script>, and <base> are wrapped inside The HTML <head> element. Additionally, The information contained by the <head> element is not displayed by the browser on the web page.

Similar Reads

HTML head Elements

Tag Description A container for metadata, placed between the and tags. Required element that defines the title of the document. <style> Used to define style information for a single document. <link> Often used to link to external style sheets. <meta> They are typically used to specify the character set, page description, keywords, author of the document, and viewport settings. <script> Used to define client-side JavaScript. <base> Specifies the base URL and target for all relative URLs in a page.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<title>_element_2"> <p class="article-related-title"> HTML <title> Element</p> <p class="article-related-description"> The title tag is an important element of a webpage that is used to provide the title of the page. It should contain only text and there can only be one <title> element in an HTML document. To make your webpage more informative, it is advisable to use a detailed and descriptive title instead of a short one.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<style>_element_3"> <p class="article-related-title"> HTML <style> Element</p> <p class="article-related-description"> ... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<link>_element_4"> <p class="article-related-title"> HTML <link> Element</p> <p class="article-related-description"> The HTML <style> element is used to embed or link to CSS styles within a webpage, allowing developers to define the visual presentation of HTML elements. It enhances the design and layout of a document by specifying color, font, spacing, and other styling properties.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<meta>_element_5"> <p class="article-related-title"> HTML <meta> Element</p> <p class="article-related-description"> ... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_setting_the_viewport_6"> <p class="article-related-title"> Setting the viewport</p> <p class="article-related-description"> The <link> tag in HTML is used to define a link between a document and an external resource. The link tag is mainly used to link to external style sheets making an organised structure of CSS files.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<script>_element_7"> <p class="article-related-title"> HTML <script> Element</p> <p class="article-related-description"> ... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<base>_element_8"> <p class="article-related-title"> HTML <base> Element</p> <p class="article-related-description"> ... </p> </a> </div> </div> </div> </div> <div class="detail-right"> <div class="box"> <h4>Categories</h3> <div class="cats"> <a href="/html/default" class="cats_item" title="HTML Tutorial">HTML</a> <a href="/css3/default" class="cats_item" title="CSS3 Tutorial">CSS3</a> <a href="/bootstrap/default" class="cats_item" title="Bootstrap Tutorial">Bootstrap</a> <a href="/foundation/default" class="cats_item" title="Foundation Tutorial">Foundation</a> <a href="/sass/default" class="cats_item" title="Sass Tutorial">Sass</a> <a href="/js/default" class="cats_item" title="JavaScript Tutorial">JavaScript</a> <a href="/typescript/index" class="cats_item" title="TypeScript Tutorial">TypeScript</a> <a href="/jquery/default" class="cats_item" title="JQuery Tutorial">JQuery</a> <a href="/angularjs/default" class="cats_item" title="AngularJS Tutorial">AngularJS</a> <a href="/react/default" class="cats_item" title="React Tutorial">React</a> <a href="/nodejs/default" class="cats_item" title="NodeJS Tutorial">NodeJS</a> <a href="/highcharts/default" class="cats_item" title="Highcharts Tutorial">Highcharts</a> <a href="/php/default" class="cats_item" title="PHP Tutorial">PHP</a> <a href="/python/default" class="cats_item" title="Python based tutorial">Python</a> <a href="/python3/default" class="cats_item" title="Python3 tutorial">Python3</a> <a href="/django/index" class="cats_item" title="Django tutorial">Django</a> <a href="/linux/default" class="cats_item" title="Linux tutorial">Linux</a> <a href="/docker/default" class="cats_item" title="Docker tutorial">Docker</a> <a href="/ruby/default" class="cats_item" title="Ruby tutorial">Ruby</a> <a href="/java/default" class="cats_item" title="Java tutorial">Java</a> <a href="/cprogramming/default" class="cats_item" title="C tutorial">C</a> <a href="/cplusplus/default" class="cats_item" title="C ++ tutorial">C ++</a> <a href="/perl/default" class="cats_item" title="Perl tutorial">Perl</a> <a href="/servlet/default" class="cats_item" title="Servlet tutorial">Servlet</a> <a href="/jsp/default" class="cats_item" title="JSP tutorial">JSP</a> <a href="/lua/default" class="cats_item" title="Lua tutorial">Lua</a> <a href="/scala/default" class="cats_item" title="Scala tutorial">Scala</a> <a href="/go/index" class="cats_item" title="Go tutorial">Go</a> <a href="/asp/default" class="cats_item" title="ASP tutorial">ASP</a> <a href="/csharp/default" class="cats_item" title="C # tutorial">C #</a> <a href="/sql/default" class="cats_item" title="SQL Tutorial">SQL</a> <a href="/mysql/default" class="cats_item" title="MySQL Tutorial">MySQL</a> <a href="/sqlite/default" class="cats_item" title="SQLite Tutorial">SQLite</a> <a href="/mongodb/default" class="cats_item" title="MongoDB Tutorial">MongoDB</a> <a href="/redis/default" class="cats_item" title="Redis Tutorial">Redis</a> <a href="/android/default" class="cats_item" title="Android Tutorial">Android</a> <a href="/swift/default" class="cats_item" title="Swift Tutorial">Swift</a> <a href="/ionic/default" class="cats_item" title="ionic Tutorial">ionic</a> <a href="/kotlin/index" class="cats_item" title="kotlin Tutorial">Kotlin</a> <a href="/xml/default" class="cats_item" title="XML Tutorial">XML tutorial</a> </div> </div> <div class="box"> <h4>Contact US</h4> <div class="form-group" style="height:36px"> <label for="inputEmail3" class="col-sm-3 control-label">Email:</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">Content:</label> <div class="col-sm-9"> <textarea class="form-control" rows="3" id="inputTextarea" placeholder="Please Enter"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button class="btn btn-default" onclick="toSubmit()" style="margin-top:15px">Submit</button> </div> </div> </div> <div class="box outside"> <a href="/article/learn_method__enable_a_built-in_admin_account_3"></a> <a href="/article/learn_deep_work_2"></a> <a href="/article/learn_modulus_assignment_operator_6"></a> <a href="/article/learn_count_number_of_datasets_2"></a> <a href="/article/learn_derivation_of_eccentricity_of_ellipse_9"></a> <a href="/article/learn_when_to_prefer_enum_instead_of_macro_1"></a> <a href="/article/learn__understand_the_mobile_development_landscape_3"></a> <a href="/article/learn_faqs_on_motion_15"></a> <a href="/article/learn_inheritance_of_private_methods_with_parameter_contravariance_5"></a> <a href="/article/learn_how_to_reboot_a_computer_4"></a> </div> </div> </div> </div> <script src="/public/js/jquery.min.js"></script> <script src="/public/js/bootstrap.min.js"></script> <script> $(function() { var ref = document.referrer; var data = ref ? ref.split('//')[1].split('/')[0].replace(/\./g, '-') : 'other'; $.post("/analysis", { referrer: data }); }); function toSubmit() { var email = $('#inputEmail3').val() var contact = $('#inputTextarea').val(); if (email.length > 5 && contact.length > 1) { $.ajax({ url: '/contact', // 目标URL type: 'POST', // 请求类型 data: { email: email, contact: contact }, success: function(res) { // 请求成功时的回调函数 console.log(res); if (res == true) { $('#inputEmail3').val('') $('#inputTextarea').val('') } }, error: function(xhr, status, error) { // 请求失败时的回调函数 console.error(error); } }); } }; </script> </body> </html>